<script setup>
import { useRouter } from "vue-router";
import { ref, watch, onMounted } from "vue";
import { useWeatherStore } from '@/stores/weather';
import { storeToRefs } from 'pinia';

const router = useRouter()

const { local_city, weather_base_local, isLocal, isAdd } = storeToRefs(useWeatherStore())
const { allWeather, getOption, getLocalWeather, addWeather, jumpIndex } = useWeatherStore()

//该数组用于天气表格渲染
const arr = ref(allWeather())

//该二维数组用于气温图表渲染
const data = ref([[], []])

//图表对象
const option = ref({})

//设置提示按钮是否激活，背景遮罩是否出现
const isActive = ref(false)

//设置列表渲染时，时间对应的星期数
const whichday = (weather, index) => {
  const weekArr = ["0", "周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  if (index == 0) {
    return "今天"
  } else if (index == 1) {
    return "明天"
  } else {
    return weekArr[weather.week]
  }
}

//返回主页功能，主页用于加载当地天气信息
const handleClick = () => {
  router.push("/")
  jumpIndex()
}

//对气温数据进行监听，当数据变化后，获取新值，将新值传递给图表option数据，进行图表的更新
watch(data, (newValue) => {
  option.value = {
    xAxis: {
      show: false,
      type: 'category',
    },
    yAxis: {
      show: false,
      type: 'value',
    },
    grid: {
      top: "center",
      left: 0,
      bottom: 0,
      right: 0,
    },
    series: [
      {
        type: "line",
        data: newValue[0],
        label: {
          show: true,
          formatter: (params) => {
            return "白" + params.data + "℃"
          },
          color: "white",
          backgroundColor: "none",
        }
      },
      {
        type: "line",
        data: newValue[1],
        label: {
          show: true,
          formatter: (params) => {
            return "晚" + params.data + "℃"
          },
          color: "white",
          backgroundColor: "none",
          position: "bottom",
        }
      },
    ]
  }
}, { deep: true })

//挂载，当组件挂载时，调用获取本地天气数据，与温度数据的方法
onMounted(() => {
  getLocalWeather()
  data.value = getOption()
})

</script>

<template>
  <div class="container">
    <!-- =====头部区域===== -->
    <div class="header">
      <!-- 跳转router部分 -->
      <div class="link" @click="handleClick">
        <i class="iconfont icon-comfortable"></i>
        <div>新中地天气</div>
      </div>
      <!-- 当地当天天气情况 -->
      <div class="today-weather">
        <h4>{{ local_city.city }}</h4>
        <span class="css-20">实时天气：{{ weather_base_local.weather }} &nbsp; {{ weather_base_local.temperature }}℃</span>
        <span class="css-20">{{ weather_base_local.winddirection }}风{{ weather_base_local.windpower }}级</span>
      </div>
      <!-- 提示图标 -->
      <div class="tips">
        <i class="iconfont icon-tishi2" @click="isActive = !isActive"></i>
        <i class="iconfont icon-jia" :class="isLocal || isAdd ? 'disappear' : ''" style="font-size: 16px;"
          @click="addWeather"></i>
      </div>
    </div>
    <!-- =====主体部分，包含插槽与图表===== -->
    <div class="main">
      <slot></slot>
      <div class="recent-weather">
        <div class="text" v-if="arr.length > 0">
          <div class="day" v-for="(weather, index) in arr" :key="weather.date">
            <span>{{ whichday(weather, index) }}</span>
            <span>{{ weather.date.slice(5) }}</span>
            <span>{{ weather.dayweather }}</span>
            <span>风力{{ weather.daypower }}级</span>
          </div>
        </div>
        <div class="chart">
          <v-chart :option="option" />
        </div>
      </div>
    </div>
  </div>
  <!-- =====设置遮罩与弹框===== -->
  <transition>
    <div class="mask" v-show="isActive">
      <div class="pop-up-box">
        <h2>关于：</h2>
        <p>这个应用可以用来追踪你选择城市的当前天气</p>
        <h2 class="m-top">如何使用：</h2>
        <p>1.点击搜索框输入你希望追踪的城市</p>
        <p>2.在搜索结果中选中一个城市，你将获取当地最新的天气</p>
        <p>3.点击右侧的+号可以将追踪城市的天气情况保存在首页</p>
        <h2 class="m-top">移除城市：</h2>
        <p>如果你不想在首页关注某个城市，可以通过底部的按钮删除它</p>
        <button @click="isActive = !isActive">关闭</button>
      </div>
    </div>
  </transition>

</template>

<style land="scss" scoped>
@import "http://at.alicdn.com/t/c/font_4606434_zickeajiy1.css";

.container {
  width: 100%;
  color: white;
  background: #00668a;

  .header {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 24px 276.4px;
    background: #00668a;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    .link {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: white;
      text-decoration: none;
      font-size: 1.5rem;
      line-height: 2rem;

      i {
        font-size: 1.5rem;
      }
    }

    .today-weather {
      display: flex;
      align-items: center;
      gap: 1rem;

      h4 {
        font-size: 1.125rem;
        line-height: 1.75rem;
      }

      .css-20 {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }

    .tips {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 10px;

      i {
        &.disappear {
          display: none;
        }

        font-size: 1.25rem;
        line-height: 1.75rem;
        cursor: pointer;
        transition: 1s;

        &:hover {
          color: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }

  .main {
    margin-top: 80px;

    .recent-weather {
      margin: 0 276.4px;
      margin-top: 8px;
      padding: 40px 48px 0 48px;
      background: #004e71;

      .text {
        display: flex;
        gap: 1.5rem;

        .day {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          flex: 1;
          text-align: center
        }
      }

      .chart {
        margin-top: 40px;
        width: 100%;
        height: 160px;
        text-align: center;
      }
    }
  }
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);

  .pop-up-box {
    position: absolute;
    top: 128px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px;
    width: 300px;
    background: white;

    h2 {
      line-height: 24px;
    }

    p {
      font-size: 12px;
      line-height: 16px;
    }

    .m-top {
      margin-top: 16px;
    }

    button {
      margin-top: 32px;
      padding: 8px 24px;
      color: white;
      background: #00668a;
      border: none;
    }
  }
}

/* 开始阶段的持续时间(时间段) */
.v-enter-active,
.v-leave-active {
  transition: opacity 1s ease;
}

/* 开始/结束的(时间点) */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>